<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Dashboard">
    <meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">

    <title>DASHGUM - Bootstrap Admin Template</title>


    {% load static %}
    <link rel="stylesheet" href="{% static 'assets/css/style-qr.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/notice.min.css' %}">
    <link rel="stylesheet"
          href="{% static 'assets/css/default.min.css' %}">

    <!-- Bootstrap core CSS -->
    <link href="{% static 'assets/css/bootstrap.css' %}" rel="stylesheet">
    <!--external css-->
    <link href="{% static 'assets/font-awesome/css/font-awesome.css' %}" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="{% static 'assets/js/bootstrap-datepicker/css/datepicker.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'assets/js/bootstrap-daterangepicker/daterangepicker.css' %}" />

    <!-- Custom styles for this template -->
    <link href="{% static 'assets/css/style.css' %}" rel="stylesheet">
    <link href="{% static 'assets/css/style-responsive.css' %}" rel="stylesheet">

    <link href="{% static 'assets/css/purchase.css' %}" rel="stylesheet">
    <link href="{% static 'assets/css/the-datepicker.css' %}" rel="stylesheet">



  </head>

  <body>

  <section id="container" >
      <!-- **********************************************************************************************************************************************************
      TOP BAR CONTENT & NOTIFICATIONS
      *********************************************************************************************************************************************************** -->
      <!--header start-->
      <header class="header black-bg">
              <div class="sidebar-toggle-box">
                  <div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div>
              </div>
            <!--logo start-->
            <a href="index.html" class="logo"><b>DASHGUM FREE</b></a>
            <!--logo end-->
            <div class="nav notify-row" id="top_menu">
                <!--  notification start -->
                <ul class="nav top-menu">
                    <!-- settings start -->
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="index.html#">
                            <i class="fa fa-tasks"></i>
                            <span class="badge bg-theme">4</span>
                        </a>
                        <ul class="dropdown-menu extended tasks-bar">
                            <div class="notify-arrow notify-arrow-green"></div>
                            <li>
                                <p class="green">You have 4 pending tasks</p>
                            </li>
                            <li>
                                <a href="index.html#">
                                    <div class="task-info">
                                        <div class="desc">DashGum Admin Panel</div>
                                        <div class="percent">40%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                            <span class="sr-only">40% Complete (success)</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="index.html#">
                                    <div class="task-info">
                                        <div class="desc">Database Update</div>
                                        <div class="percent">60%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                            <span class="sr-only">60% Complete (warning)</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="index.html#">
                                    <div class="task-info">
                                        <div class="desc">Product Development</div>
                                        <div class="percent">80%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                            <span class="sr-only">80% Complete</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="index.html#">
                                    <div class="task-info">
                                        <div class="desc">Payments Sent</div>
                                        <div class="percent">70%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
                                            <span class="sr-only">70% Complete (Important)</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="external">
                                <a href="#">See All Tasks</a>
                            </li>
                        </ul>
                    </li>
                    <!-- settings end -->
                    <!-- inbox dropdown start-->
                    <li id="header_inbox_bar" class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="index.html#">
                            <i class="fa fa-envelope-o"></i>
                            <span class="badge bg-theme">5</span>
                        </a>
                        <ul class="dropdown-menu extended inbox">
                            <div class="notify-arrow notify-arrow-green"></div>
                            <li>
                                <p class="green">You have 5 new messages</p>
                            </li>
                            <li>
                                <a href="index.html#">
                                    <span class="photo"><img alt="avatar" src="assets/img/ui-zac.jpg"></span>
                                    <span class="subject">
                                    <span class="from">Zac Snider</span>
                                    <span class="time">Just now</span>
                                    </span>
                                    <span class="message">
                                        Hi mate, how is everything?
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="index.html#">
                                    <span class="photo"><img alt="avatar" src="assets/img/ui-divya.jpg"></span>
                                    <span class="subject">
                                    <span class="from">Divya Manian</span>
                                    <span class="time">40 mins.</span>
                                    </span>
                                    <span class="message">
                                     Hi, I need your help with this.
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="index.html#">
                                    <span class="photo"><img alt="avatar" src="assets/img/ui-danro.jpg"></span>
                                    <span class="subject">
                                    <span class="from">Dan Rogers</span>
                                    <span class="time">2 hrs.</span>
                                    </span>
                                    <span class="message">
                                        Love your new Dashboard.
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="index.html#">
                                    <span class="photo"><img alt="avatar" src="assets/img/ui-sherman.jpg"></span>
                                    <span class="subject">
                                    <span class="from">Dj Sherman</span>
                                    <span class="time">4 hrs.</span>
                                    </span>
                                    <span class="message">
                                        Please, answer asap.
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="index.html#">See all messages</a>
                            </li>
                        </ul>
                    </li>
                    <!-- inbox dropdown end -->
                </ul>
                <!--  notification end -->
            </div>
            <div class="top-menu">
            	<ul class="nav pull-right top-menu">
                    <li><a class="logout" href="login.html">Logout</a></li>
            	</ul>
            </div>
        </header>
      <!--header end-->
      
      <!-- **********************************************************************************************************************************************************
      MAIN SIDEBAR MENU
      *********************************************************************************************************************************************************** -->
      <!--sidebar start-->
      <aside>
          <div id="sidebar"  class="nav-collapse ">
              <!-- sidebar menu start-->
              <ul class="sidebar-menu" id="nav-accordion">
              
              	  <p class="centered"><a href="profile.html"><img src="assets/img/ui-sam.jpg" class="img-circle" width="60"></a></p>
              	  <h5 class="centered">Marcel Newman</h5>
              	  	
                  <li class="mt">
                      <a href="index.html">
                          <i class="fa fa-dashboard"></i>
                          <span>Dashboard</span>
                      </a>
                  </li>

                  <li class="sub-menu">
                      <a href="javascript:;" >
                          <i class="fa fa-desktop"></i>
                          <span>UI Elements</span>
                      </a>
                      <ul class="sub">
                          <li><a  href="general.html">General</a></li>
                          <li><a  href="buttons.html">Buttons</a></li>
                          <li><a  href="panels.html">Panels</a></li>
                      </ul>
                  </li>

                  <li class="sub-menu">
                      <a href="javascript:;" >
                          <i class="fa fa-cogs"></i>
                          <span>Components</span>
                      </a>
                      <ul class="sub">
                          <li><a  href="calendar.html">Calendar</a></li>
                          <li><a  href="gallery.html">Gallery</a></li>
                          <li><a  href="todo_list.html">Todo List</a></li>
                      </ul>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" >
                          <i class="fa fa-book"></i>
                          <span>Extra Pages</span>
                      </a>
                      <ul class="sub">
                          <li><a  href="blank.html">Blank Page</a></li>
                          <li><a  href="login.html">Login</a></li>
                          <li><a  href="lock_screen.html">Lock Screen</a></li>
                      </ul>
                  </li>
                  <li class="sub-menu">
                      <a class="active" href="javascript:;" >
                          <i class="fa fa-tasks"></i>
                          <span>Forms</span>
                      </a>
                      <ul class="sub">
                          <li class="active"><a  href="form_component.html">Form Components</a></li>
                      </ul>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" >
                          <i class="fa fa-th"></i>
                          <span>Data Tables</span>
                      </a>
                      <ul class="sub">
                          <li><a  href="basic_table.html">Basic Table</a></li>
                          <li><a  href="responsive_table.html">Responsive Table</a></li>
                      </ul>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" >
                          <i class=" fa fa-bar-chart-o"></i>
                          <span>Charts</span>
                      </a>
                      <ul class="sub">
                          <li><a  href="morris.html">Morris</a></li>
                          <li><a  href="chartjs.html">Chartjs</a></li>
                      </ul>
                  </li>

              </ul>
              <!-- sidebar menu end-->
          </div>
      </aside>
      <!--sidebar end-->
      
      <!-- **********************************************************************************************************************************************************
      MAIN CONTENT
      *********************************************************************************************************************************************************** -->
      <!--main content start-->

          <section id="main-content">
          <section class="wrapper">
          	<h3><i class="fa fa-angle-right"></i> 创建报价申请</h3>

          	<!-- BASIC FORM ELELEMNTS -->
          	<div class="row mt">
          		<div class="col-lg-12">
                  <div class="form-panel">
                  	  <h4 class="mb"><i class="fa fa-angle-right"></i> 报价申请</h4>
                      <form class="form-horizontal style-form" method="post">
                        <div class="form-group">
                        <div class="col-md-12 mt">
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th>采购申请编码</th>
                                        <th>条目编码</th>
                                        <th>商品编码</th>
                                        <th>工厂</th>
                                        <th>存储位置</th>
                                        <th>数量</th>
                                        <th>送货时间</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@mdo</td>
                                        <td>@mdo</td>
                                        <td>@mdo</td>
                                        <td><input type="text" name="quantity" class="form-control rfq-td-create"></td>
                                        <td><input type="text" class="form-control rfq-td-create" name="deliveryDate" onclick="date(this)"></td>
                                    </tr>
                                </tbody>
                                </table>
                        </div><!-- /col-md-12 -->
                    </div>

                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">截止日期</label>
                            <div class="col-sm-10">
                                <input type="text" id="my-input" name="deadline" class="form-control" onclick="date(this)">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">集合码信息</label>
                            <div class="col-sm-10">
                                <input name="collNo" type="text"  class="form-control">
                            </div>
                        </div>
                        <h5 class="mb"><i class="fa fa-angle-right"></i> 合作供应商相关信息   <button type="button" class="btn btn-round btn-primary" id="btn-addgood" onclick="addvendor()">添加供应商</button></h5>

                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">供应商编码</label>
                            <div class="col-sm-10">
                                <input type="text"  name="vendorvid" class="form-control" id="gyscode">
                                <button type="button" class="btn btn-link " data-toggle="modal" data-target="#myModalgys">忘记编号？</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">供应商名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="vdname">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">城市</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="city">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">街区地址</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="location">
                            </div>
                        </div>
                          <div class="form-group">
                              <label class="col-sm-2 col-sm-2 control-label">供应商邮编</label>
                              <div class="col-sm-10">
                                  <input type="text" class="form-control" id="postcode">
                              </div>
                          </div>

                          <div class="form-group">
                            <div class="col-md-12 mt">
                                <div class="content-panel">
                                    <table class="table table-hover">
                                     <div id="table-pr-head"> <h4><i class="fa fa-angle-right"></i> 供应商信息</h4>

                                    </div>
                                        <thead>
                                        <tr>
                                            <th>供应商编码</th>
                                            <th>供应商名称</th>
                                            <th>城市</th>
                                            <th>街区地址</th>
                                            <th>供应商邮编</th>
                                        </tr>
                                        </thead>
                                        <tbody id="vddiv">

                                    </tbody>
                                    </table>
                </div><! --/content-panel -->
                </div><!-- /col-md-12 -->
            </div>
              <div id="btn-rfq-create">
                <button type="type" class="btn btn-primary btn-lg btn-block" >创建报价申请</button>
        </div>
                      </form>
                  </div>
          		</div><!-- col-lg-12-->
          	</div><!-- /row -->



        <!--搜索供应商编码modal-->
        <div class="col-sm-12">
            <div class="modal fade" id="myModalgys" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                      <h4 class="modal-title" id="myModalLabel">搜索供应商编码</h4>
                    </div>
                    <div class="modal-body">
                      <!-- Hi there, I am a Modal Example for Dashgum Admin Panel. -->
                      <!-- 搜索条件 -->
                        <fieldset>
                            <div class="form-group">
                                <label class="col-sm-4 col-sm-4 control-label">
                                    <div class="pull-right">供应商名称:</div>
                                    </label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" name="vname" id="vname">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-4 col-sm-4 control-label">
                                    <div class="pull-right">城市:</div>
                                    </label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" name="city" id="city">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 col-sm-4 control-label">
                                    <div class="pull-right">创建者编码:</div>
                                    </label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" name="ccode" id="ccode">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 col-sm-4 control-label">
                                    <div class="pull-right">公司编码:</div>
                                    </label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" name="gcode" id="gcode">
                                </div>
                                <div class="col-sm-2">
                                    <input class="btn btn-theme02"  name="submit" value="submit">
                                </div>
                            </div>
                          </fieldset>


                    <table  class="table table-bordered table-striped table-condensed">
                        <thead>
                            <!-- tr 指定表行标签-->
                            <tr>
                                <!-- th 设置表头内容，默认加粗-->
                                <th>供应商编号</th>
                                <th>供应商名称</th>
                                <th>所在城市</th>
                                <th>公司编码</th>
                                <th>创建者编码</th>
                            </tr>
                        </thead>
                        <tbody id="gysDiv">


                        </tbody>
                    </table>
                    <script>
                        $('#vendor').on('submit', function(e) {
                            e.preventDefault();
                            $.ajax(
                            {
                                type: "POST",
                                url:
                                data:{
                                    $("#vname").val(), //供应商名称
                                    $("#city").val(), //城市
                                    $("#ccode").val(), //创建者编码
                                    $("#gcode").val(), //公司编码
                                    csrfmiddlewaretoken: '{{ csrf_token }}',
                                    dataType: "json"
                                },
                                success: function(data) {
                                    var dataObj=eval("("+data+")");
                                    var out = "";
                                    var i;
                                    for(i = 0; i < dataObj.length; i++) {
                                        out += '<tr><td>'+ /*供应商编号*/ + '</td><td>' + /*供应商名称*/ + '</td><td>' + /*所在城市*/ + '</td><td>' + /*公司编码*/ + '</td><td>' + /*创建者编码*/+'</td><tr>';
                                    }
                                    document.getElementById("gysDiv").innerHTML=out;
                                },
                                failure: function() {

                                }
                            })
                        });
                        $("table").on("dblclick","tr",function(e){

                            document.getElementById("gyscode").value=$(this).find('td').eq(0).text();
                            $('#myModalgys').modal('hide')

                        })

                    </script>
                    </div>
                    <div class="modal-footer">
                    </div>
                  </div>
                </div>
              </div>
            </div>
<!--搜索供应商编码modal-->

		</section><! --/wrapper -->
      </section><!-- /MAIN CONTENT -->

    </form>


      <!--main content end-->
      <!--footer start-->
      <footer class="site-footer">
          <div class="text-center">
              2014 - Alvarez.is
              <a href="form_component.html#" class="go-top">
                  <i class="fa fa-angle-up"></i>
              </a>
          </div>
      </footer>
      <!--footer end-->
  </section>

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script class="include" type="text/javascript" src="assets/js/jquery.dcjqaccordion.2.7.js"></script>
    <script src="assets/js/jquery.scrollTo.min.js"></script>
    <script src="assets/js/jquery.nicescroll.js" type="text/javascript"></script>


    <!--common script for all pages-->
    <script src="assets/js/common-scripts.js"></script>

    <!--script for this page-->
    <script src="assets/js/jquery-ui-1.9.2.custom.min.js"></script>

	<!--custom switch-->
	<script src="assets/js/bootstrap-switch.js"></script>
	
	<!--custom tagsinput-->
	<script src="assets/js/jquery.tagsinput.js"></script>
	
	<!--custom checkbox & radio-->
	    <script src="assets/js/notice.min.js"></script>
    <script>
        const notice = new Notice();
    </script>
        <script src="assets/js/main-qr.js"></script>
	<script type="text/javascript" src="assets/js/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
	<script type="text/javascript" src="assets/js/bootstrap-daterangepicker/date.js"></script>
	<script type="text/javascript" src="assets/js/bootstrap-daterangepicker/daterangepicker.js"></script>
	
	<script type="text/javascript" src="assets/js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
	
	
	<script src="assets/js/form-component.js"></script>    

    <script src="assets/js/the-datepicker.js"></script>

    <script>
            function date(time){
            var datepicker = new TheDatepicker.Datepicker(time);
            datepicker.render();
            }
    </script>
    
  <script>
      //custom select box

      $(function(){
          $('select.styled').customSelect();
      });

  </script>
<script>
    var i=0
    function addvendor() {
        i++
    var vdcode= document.getElementById("vdcode").value
    var vdname = document.getElementById("vdname").value
    var city = document.getElementById("city").value
    var location = document.getElementById("location").value
    var postcode = document.getElementById("postcode").value
    var trStr = ''
    trStr = '<tr><td>' + vdcode + '</td><td>' + vdname + '</td><td>' + city + '</td><td>' + location + '</td><td>' + postcode + '</td></tr>'
    document.getElementById("vddiv").innerHTML += trStr;
    $("#vdcode").val('');
    $("#vdname").val('');
    $("#city").val('');
    $("#location").val('');
    $("#postcode").val('');
    showMessage({text: '添加成功！',type: 'success'})

}

function create(){ //创建成功
    var j
  for(j=0;j<i;j++){
        showMessage({text: '创建成功！xx供应商的报价申请编码：',type: 'success',showClose: true, autoClose: false})
  }

}

</script>
  </body>
</html>
